<template>
  <h4>
    依赖注入 - <button @click="handleClick">btn</button> -
    <button @click="goToDetail">跳转到详情页</button>
  </h4>
  <Inject />
</template>

<script setup>
import { provide, ref } from "vue";
import Inject from "./09-inject.vue";
import { useRouter } from "vue-router";

const newClass = ref("hz2303");

const handleClick = () => {
  newClass.value = "hz2304";
};

// useRouter方法只能在setup的顶层(里面的最外层)调用
const router = useRouter();
const goToDetail = () => {
  // 编程时导航
  // this.$router.push("/detail")

  router.push("/detail/678");
};

// provide函数有两个参数，分别是属性和属性值
// vue3组合式api的依赖注入有很好的响应式
provide("class", "hz2302");
provide("class2", newClass);
</script>
